<template>
	<el-table :data="tableConfig.data" style="width: 100%" :border="tableConfig.border" @selection-change="selectionChange">
		<el-table-column 
			v-for="column in tableConfig.columns" 
			:key="column.prop" 
			:prop="column.prop" 
			:label="column.label" 
			:width="column.width" 
			:align="column.align"
			:type="column.type"
		>
			<!-- 如果 column.render 存在，使用它渲染 -->
			<template v-if="column.type == 'button'" #default="{row}">
			    <slot name="button" :data="column.button" :row="row"></slot>
			</template>
			<template v-if="column.type == 'image'" #default="{row}">
				<el-image :src="row[column.prop]" :style="column.styleObj" :preview-src-list="[row[column.prop]]" preview-teleported></el-image>
			</template>
		</el-table-column>
	</el-table>

</template>

<script setup lang="ts">
	
	defineProps({
		tableConfig: {
			type: Object,
			default: () => ({})
		}
	})
	const emit = defineEmits(['selectionChange'])
	const selectionChange = (ev:any) => {
		emit('selectionChange',ev)
	}
</script>

<style>
</style>